<template>
  <el-dialog
    :model-value="dialogVisible"
    :z-index="1000"
    :before-close="handleClose"
    width="450px"
    title="请选择门禁组"
    draggable
  >
    <div class="tree">
      <ZTree :id="treeId" :api="getGroupTree" :params="{ rgFlag: 0 }" @click-dom="zTreeOnClick" />
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="TreeDialog">
/* eslint-disable */
// @ts-nocheck
import { ref, onMounted, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import ZTree from "@/components/ZTree/index.vue";
import { getGroupTree } from "@/api/modules/common";

const treeId = ref("tree3");
const ruleGroupIds = ref([]);

const props = defineProps<{
  dialogVisible: boolean;
  handleClose: () => void;
  submitCallback: (name: any, ids: any) => void;
}>();

/**
 * 点击树节点
 */
function zTreeOnClick({ ids }) {
  ruleGroupIds.value = ids;
}

/**
 * 提交信息
 */
const handleSubmit = async () => {
  props.submitCallback(ruleGroupIds.value);
};
</script>

<style lang="scss" scoped>
.tree {
  height: 80vh;
  overflow-y: auto;
}
</style>
